<template>
	<view class="content login-page">
		<cu-custom bgColor="" :isBack="true"></cu-custom>
		<!-- <image class="logo" src="/static/img/logo@3x.png"></image> -->
		<view class="nav-box">
			<view class="n-b-login" @tap="goPage('login')">登录</view>
			<view class="n-b-reg">注册</view>
		</view>
		<view class="input-group" v-if="showTopHalf">
			<m-input type="number" clearable v-model="params.mobile" placeholder="请输入手机号" :icon="'../../static/img/phone.png'"  :maxLength="11" :focus="true"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.imgcode" :icon="'../../static/img/yanzheng.png'" placeholder="请输入验证码" :maxLength="6"
			:imageCode="true"></m-input>
			<view class="i-g-next pub-btn" @tap="handleNext()">下一步</view>
		</view>
		<view class="input-group" v-if="!showTopHalf">
			<m-input type="password" clearable v-model="params.password" placeholder="输入您的密码" :icon="'../../static/img/password.png'" :maxLength="20"></m-input>
			<m-input type="password" clearable v-model="params.rePassword" placeholder="确认密码" :icon="'../../static/img/password.png'" :maxLength="20"></m-input>
		    <m-input type="number" clearable v-model="params.code" placeholder="手机验证码" :icon="'../../static/img/yanzheng.png'" :maxLength="6">
		    	<button size="mini" class="text-black text-style clear-btn" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
		    </m-input>
			<view class="invite-text" v-if="inviteCode">
							 <text>邀请码:</text>
							 <text>{{inviteCode}}</text>
			</view>
			<button type="primary" class="i-g-login pub-btn" @tap="bindLogin()" :loading="submitBtnDis">注册</button>
		</view>
		<!-- <view class="input-group">
			<h1>注册 <span @tap="goPage('login')">登录</span></h1>
			<m-input type="number" clearable v-model="params.mobile" placeholder="请输入手机号"  :maxLength="11" :focus="true"></m-input>
			<m-input type="password" clearable v-model="params.password" placeholder="输入您的密码" :maxLength="11"></m-input>
			<m-input type="password" clearable v-model="params.rePassword" placeholder="确认密码" :maxLength="11"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.imgcode" placeholder="图形验证码" :maxLength="6"
			:imageCode="true"></m-input>
			 <m-input type="number" clearable v-model="params.code" placeholder="手机验证码" :maxLength="6">
			 	<button size="mini" class="text-orange text-style" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
			 </m-input>
			 <view class="invite-text" v-if="inviteCode">
				 <text>邀请码:</text>
				 <text>{{inviteCode}}</text>
			 </view>
			<button type="primary" class="primary" @tap="bindLogin" :loading="submitBtnDis">注册</button>
		</view> -->
		<view class="padding fixed">
			<text class="text-sm text-white">登录/注册即表示您已阅读并同意</text><text class="text-white text-sm" @tap="goAgreement('agreement','user')">《用户注册服务协议》</text>
			<text class="text-white text-sm" @tap.stop="goAgreement('agreement','service')">《投资人服务协议》</text>
			<text class="text-white text-sm" @tap.stop="goAgreement('agreement','tzfx')">《投资风险承诺书》</text>
			<text class="text-white text-sm" @tap.stop="goAgreement('agreement','dzxy')">《电子签名授权协议》</text>
			<text class="text-white text-sm" @tap.stop="goAgreement('agreement','wtkj')">《委托快捷签署协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				btnDis: false,
				submitBtnDis: false,
				btnText: "获取验证码",
				showTopHalf:true,
				params: {
					mobile: "",
					imgcode: "",
					password: "",
					rePassword: "",
					code: ""
				},
				reqBody: {},
				checked: false,
				t: null
			}
		},
		onLoad(query) {
			// console.log()
			this.initredirectRouteData(query);
			if(query && query.invite){
				this.$store.commit("SetInviteCode", query.invite);
			}else if(query && query.q){
				let sence=decodeURIComponent(query.q)
				let inviteId=sence.split('invite=')[1]
				if(inviteId){
					this.$store.commit("SetInviteCode",inviteId)
				}
			}
		},
		onShow(){
			this.$refs.imageCode.getImgCode();
		},
		computed: {
			...mapState(["openId",'inviteCode']),
			...mapGetters(['hasLogin'])
		},
		methods: {
			handleNext(){
				this.reqBody["mobile"] = this.params["mobile"];
				this.reqBody["code"] = this.params["imgcode"];
				let checkRes = graceChecker.check(this.reqBody, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				this.showTopHalf=false
			},
			goAgreement(routeName, type) {
				this.$mRouter.push({
					route: this.$mRoutesConfig[routeName],
					query: {
						type: type
					}
				})
			},
			async sendCode() {
				/* this.reqBody["mobile"] = this.params["mobile"];
				this.reqBody["code"] = this.params["imgcode"];
				let checkRes = graceChecker.check(this.reqBody, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				} */
				await this.$apis.sendLoginCode({
					mobile: this.params.mobile,
					code: this.params.imgcode,
					type: "login"
				});
			
				uni.showToast({
					title: '发送成功,请查收'
				});
				// 开启倒计时
				this.countDown();
			},
			// 验证码倒计时
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			goPage(routeName) {
				let page = getCurrentPages()
				let redirecte = false
				if (page.length > 1) {
					if (page[page.length - 1].route.indexOf(routeName) !== -1) {
						redirecte = true
					} else {
						redirecte = false
					}
				} else {
					redirecte = false
				}
				if (redirecte) {
					this.$mRouter.back(-1)
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig[routeName],
					})
				}
			},
			initredirectRouteData(query) {
				console.log(query)
				if (query.redirectUrl) {
					this.redirectRoute.path = query.redirectUrl;
					delete query.redirectUrl;
					this.routeQuery = query;
				}
			},
		
			// 登录
			async bindLogin() {
				try {
					let info = {}
					info["mobile"] = this.params["mobile"];
					info["password"] = this.params["password"];
					info["rePassword"] = this.params["rePassword"];
					info["code"] = this.params["code"];
					let checkRes = graceChecker.check(info, [{
							name: "mobile",
							checkType: "mobile",
							checkRule: "",
							errorMsg: "手机号格式不正确"
						}, {
							name: "password",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入密码"
						},
						{
							name: "rePassword",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入确认密码"
						},
						{
							name: "rePassword",
							checkType: "same",
							checkRule: info["password"],
							errorMsg: "两次输入密码不同，请重新输入"
						}, {
							name: "code",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入短信验证码"
	}
					]);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// if (!this.checked) {
					// 	uni.showToast({
					// 		title: '尚未同意协议',
					// 		icon: "none"
					// 	});
					// 	return;
					// }
					// 校验通过...
					this.submitBtnDis = true
					let params = {
					              mobile: this.params.mobile,
					              code: this.params.code,
					              password: this.params.password,
								  invite:this.inviteCode
					            };
								console.log('邀请码'+this.inviteCode)
					let userInfo = await this.$apis.register(params);
					this.submitBtnDis = false
					this.goPage('login')
				} catch (e) {
					this.submitBtnDis = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative;
		background-image: url("https://test.hrycf.com/hryxcx/loginBg2.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		text-align: center;
	}
	
	.nav-box{
		width: 433rpx;
		height: 76rpx;
		margin:264rpx auto 0rpx ;
		border-radius: 38rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.n-b-login{
			width:216rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.n-b-reg{
			width:216rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F99F60;
			border-radius: 30rpx;
			box-shadow: 0 5rpx 3px rgba(237, 79, 60, 0.57);
			margin-right: 10rpx;
			color:#ffffff
		}
	}
	

	.logo {
		width: 275rpx;
		height: 87rpx;
		margin: 17rpx auto 47rpx;
	}

	.input-group {
		width: 583rpx;
		margin: 74rpx auto 0;
		padding: 60rpx 30rpx 115rpx;
		background-color: #fff;
		// border-radius: 10upx;
		border-radius: 10rpx;
		text-align: left;
		position: relative;

		h1 {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgba(255, 106, 0, 1);
			margin-bottom: 48rpx;

			span {
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(40, 56, 71, 1);
				margin-left: 52rpx;
			}
		}
         .invite-text{
			 padding:20rpx 24rpx 0;
			 font-size:24rpx;
			 color: #CFCFCF;
		 }
		.primary {
			position: absolute;
			bottom: -50rpx;
			background-color: #FF6A00;
			width: 328rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
		.pub-btn{
			width: 466rpx;
			height: 100rpx;
			position: absolute;
			bottom: -50rpx;
			left: 50%;
			margin-left: -233rpx;
			background: linear-gradient(to right, #EC4537, #FBAB66);
			text-align: center;
			line-height: 100rpx;
			border-radius: 15rpx;
			color: #ffffff;
			box-shadow: 5rpx 5rpx 3px rgba(0, 0, 0, 0.18);
		}
		.clear-btn{
			background-color: #ffffff;
			border: none;
			font-size: 30rpx;
		}
		.clear-btn::after{
			border:none;
		}
	}

	.tips {
		padding-left: 20upx;
		margin-top: 20upx;
		color: #8c8c8c;
		font-size: 26upx;
	}

	.vs {
		position: absolute;
		bottom: 70upx;
		text-align: center;
		width: 100%;
	}

	.forget {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: rgba(198, 198, 199, 1);
		text-align: right;
	}

	.sendCode {
		display: flex;
		align-items: center;
		padding-right: 20upx;
		box-sizing: border-box;
		align-items: stretch;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200upx;
			background: #0faeff;
			color: #fff;
			border-radius: 0;
			font-size: 26upx;

			&::after {
				display: none;
			}
		}
	}

	.fixed {
		text-align: left;
		position: absolute;
		bottom: 50rpx;
	}
</style>
